<script setup lang="ts">
import type { IFormItem, IKeyValue } from '@/types/index'
// import { storeToRefs } from 'pinia'
import { useElementPlusTheme } from 'use-element-plus-theme'
import { provide, reactive, ref, watch } from 'vue'
import searchForm from '@/components/searchForm/index.vue'
import test from '@/components/test/index.vue'
import useAppStore from '@/store/modules/app'

const formData: IFormItem[] = reactive([
  {
    type: 'input',
    label: 'input',
    width: null,
    prop: 'input',
    placeholder: 'input',
    methods: null,
    options: null,
    dicID: 1,
    icon: null,
    multiple: false,
    value: 'input',
    queryType: [],
  },
  {
    type: 'select',
    label: 'select',
    width: null,
    prop: 'select',
    placeholder: 'select',
    methods: null,
    options: [
      {
        value: 1,
        label: '选项1',
        Werks: 1,
      },
      {
        value: 2,
        label: '选项2',
        Werks: 2,
      },
    ],
    dicID: 1,
    icon: null,
    multiple: false,
    value: 1,
    queryType: [],
  },
  {
    type: 'datetimerange',
    label: 'date',
    width: null,
    prop: 'date',
    placeholder: 'date',
    methods: null,
    options: null,
    dicID: 1,
    icon: null,
    multiple: false,
    value: null,
    queryType: [],
  },
])
const defaultTheme = ref('#405DFF')
const { changeTheme } = useElementPlusTheme(defaultTheme.value)
// Wrap changeTheme to handle null values from el-color-picker
function handleColorChange(val: string | null) {
  if (val) {
    changeTheme(val)
  }
}
const value1 = ref('')
const testValue = ref('')
const appStore = useAppStore()
const tag = reactive([0, 1])
// const { theme } = storeToRefs(appStore)
// const t = appStore.theme
function search() {
  // 查询
}
function reset() {
  // 重置查询条件
  formData.forEach(val => val.value = null)
}
function changeForm(value: any, item: IFormItem, _type: string) {
  item.value = value
  console.warn(item.value)
}
const methods = {
  search,
  reset,
  changeForm,
}

const form: IKeyValue = reactive({})
// function handleForm() {
//   // const form = {}
//   formData.forEach((val) => {
//     form[val.prop] = val.value
//   })
// }
function testButtonClick() {
  console.warn(testValue.value)
}
watch(formData, (newVal) => {
  newVal.forEach((val) => {
    form[val.prop] = val.value
  })
}, { deep: true, immediate: true })
provide('methods', methods)
const selectOptions = reactive(['zh-CN', 'en-US'])
const selectValue = ref('zh-cn')
// 检测 语言选择 切换语言
watch(
  () => selectValue.value,
  (newVal) => {
    appStore.changeLanguage(newVal as 'zh-CN' | 'en-US')
  },
)
</script>

<template>
  <h1>home</h1>
  <el-button type="primary" icon="Check">
    Primary
  </el-button>
  <el-button type="danger">
    {{ $t("button.save", '保存') }}
  </el-button>
  <el-button type="danger" plain>
    {{
      $t("button.tttt", 'tt22tt')
    }}
  </el-button>
  <el-pagination layout="prev, pager, next" :total="50" />
  <el-pagination :page-size="100" layout="total, prev, pager, next" :total="1000" />
  <el-select v-model="selectValue">
    <el-option v-for="(item, index) in selectOptions" :key="index" :value="item" :label="item">
      {{ item }}
    </el-option>
  </el-select>
  <el-row>
    <el-tag v-for="(item, index) in tag" :key="index" class="mx-1" closable :hit="true">
      {{ item }}
    </el-tag>
  </el-row>
  <el-color-picker v-model="defaultTheme" @change="handleColorChange" />
  <searchForm :form-items="formData" :dic-id="1" :sign-name="0" :remark="1" />
  <el-date-picker v-model="value1" type="date" placeholder="请选择日期" />
  <test v-model="testValue" />
  <el-button type="primary" @click="testButtonClick">
    测试
  </el-button>
</template>

<style scoped></style>
